import React, { PureComponent } from "react";
import { connect } from "dva";
import { getConfig } from '../../../config';
import Map from 'ol/Map';
import OlView from 'ol/View';
import LayerGroup from 'ol/layer/Group';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import proj from 'ol/proj';
import interaction from 'ol/interaction';
import SourceVector from 'ol/source/vector';
import LayerVector from 'ol/layer/vector';
import OlStyle from 'ol/style/style';
import StyleFill from 'ol/style/fill';
import StyleStroke from 'ol/style/stroke';
import StyleIcon from 'ol/style/icon';
import OlFeature from 'ol/feature';

import OlPoint from 'ol/geom/point';

//const config = getConfig();
//const mapKey = config.mapKey;
var map = null;


const initCallback = () => {
    console.log("AMapUI Loaded Done")
}

@connect(({ dashboard,loading }) => ({
    // dictionaries:global.dictionaries,
    mapData:dashboard.mapData
}))
export default class MapOpenLayers extends PureComponent {
    constructor(props) {
        super(props);
        
    }

    componentDidMount() {
        //console.log(ol);
        //console.log(new Map());
        map = new Map({
            layers : [ new LayerGroup({
                classify : "base",
                layers : [ new TileLayer({
                   title : "高德", 
                   source : new XYZ({
                       crossOrigin : 'anonymous',  
                       url:'/fenghuaGIS/map/{z}/{y}/{x}.png'
                       
                   })
               })]
            })],
            projection: 'EPSG:3857',
            target : "mapcontent",
            logo : false,
            loadTilesWhileInteracting : true,
            controls : [],
            interactions : interaction.defaults({
            doubleClickZoom : false
            }),
            view : new OlView({ 
            center : proj.fromLonLat([121.41,29.66 ]) ,
            zoom : 13,
            maxZoom : 18,
            minZoom : 0
            })
        });
        
    }

    addpoint = function(param){

    }

    layerContains = function (id){
        var layers = map.getLayers().getArray();
    	for (var i = 0; i < layers.length; i++) {
    		if (!!layers[i].getProperties()['name'] && layers[i].getProperties()['name'] == id) {
    			return layers[i];
    		}
    	}
    	return false;
    }


    render() {
        const { mapData } = this.props;
        if(mapData && mapData.length > 0){
            var data ={
                "type": "FeatureCollection",
                "features": [
                        {"type":"Feature",
                        "properties":{},
                        "geometry":{
                            "type":"Point",
                            "coordinates":[121.41,29.66]
                            }
                        }
                    ]
                }       
                var layer =this.layerContains('poi');
                var source;
                if (!layer) {
                    source = new SourceVector({
                        projection : 'EPSG:4326',
                        wrapX : false
                    });
                    var vector = new LayerVector({
                        name : "poi",
                        source : source,
                        style : new OlStyle({
                            fill : new StyleFill({
                                color : 'rgba(255, 228, 196, 0.5)'
                            }),
                            stroke : new StyleStroke({
                                color : '#ffcc33',
                                width : 2
                            }),
                            image : new StyleIcon({
                                src: '/pic_map.png'
                            })
                        })
                    });
                    map.addLayer(vector); 
                }else{ 
                    source = layer.getSource();
                }
            source.clear();
            for(var i = 0; i < mapData.length; i++){
                var geom= new OlPoint([mapData[i].longitude,mapData[i].latitude ]);
                geom=geom.transform( 'EPSG:4326','EPSG:3857'); 
                data.geometry =geom
                source.addFeature(new OlFeature(data));
            } 
        }
        return (
            <div style={{ height: '100%', width: '100%' }}>
                <div id="mapcontent"  style={{ height: '100%', width: '100%' }}>
                </div>
            </div>
        );
    }
}